<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>按钮组件的使用</title>
		<link rel="stylesheet" type="text/css" href="css/antd.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<a-button-group>
				<a-button type="primary" @click="doClick">主按钮</a-button>
				<a-button disabled>次按钮</a-button>
				<a-button type="dashed">虚线按钮</a-button>
				<a-button type="danger" ghost>危险按钮</a-button>
			</a-button-group>
			<br />
			<a-button type="dashed" shape="circle" icon="search" />
			<a-button type="dashed" icon="search" @click="doClick">搜索</a-button>
			<a-button type="primary" loading>
				加载...
			</a-button>
			<a-button type="primary" shape="circle" loading />
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				methods: {
					doClick: function() {
						this.$message.warn("触发按钮组件的Click事件");
					}
				},
			});
		</script>
	</body>
</html>
